<!-- 首页 -->
<template>
	<view class="home-wrap u-m-b-20">
		<!-- 空白页 -->
		<u-no-network @retry="init"></u-no-network>
		<shopro-empty v-if="!hasTemplate" :image="$IMG_URL + '/imgs/empty/template_empty.png'" tipText="暂未找到模板，请前往装修~">
		</shopro-empty>

		<view v-else-if="isConnected && isRefresh" class="content-box">

			<!-- 自定义模块 -->
			<view class="template-box">
				<block v-for="(item, index) in homeTemplate" :key="item.id">
					<!--导航栏-->
					<sh-nav v-if="item.type === 'topnav'"
					    :styleType="item.content.style"
						:title= "item.content.name"
					>
					</sh-nav>
					
					<!--轮播图-->
					<sh-swiper v-if="item.type === 'banner'"
					   :list="item.content.list"
					   :title="item.content.list.title"
					   :indicator-pos="item.content.pos"
					   :effect3d = "item.content.three"
					   :height = "item.content.height"
					   :border-radius ="item.content.radius"
					   :mode ="item.content.mode"
					   :title-size = "item.content.fontsize"
					   :Px="item.content.x"
					   :Py="item.content.y"
					>
						
					</sh-swiper>
					<!-- 搜索 -->
					<sh-search v-if="item.type === 'search'"></sh-search>
					<!-- 滑动宫格 -->
					<sh-grid-swiper v-if="item.type === 'menu'" :list="item.content.list"
						:oneRowNum="item.content.style"></sh-grid-swiper>
					<!-- 推荐商品 -->
					<sh-hot-goods v-if="item.type === 'goods-list' || item.type === 'goods-group'"
						:detail="item.content"></sh-hot-goods>
					<!--自定义文章-->
					<sh-hot-news v-if="item.type === 'news-list'"
						:styleType="item.content.style"
						:title-size="item.content.titlesize"
						:thumb-width="180"
						:thumb-height="200"
						:scroll-height="item.content.height"
						:scroll-width="item.content.width"
						:border-radius="item.content.radius"
						:thumb="item.content.style ==='2' || item.content.style === '3' || item.content.style ==='4' || item.content.style === '5'"
						:show-foot ="item.content.showfoot"
					>
					</sh-hot-news>
					
					<!-- 广告魔方 -->
					<sh-adv v-if="item.type === 'adv'" :detail="item.content"></sh-adv>
					<!-- 优惠券 -->
					<sh-coupon v-if="item.type === 'coupons'" :detail="item.content"></sh-coupon>
					<!-- 秒杀-->
					<sh-seckill v-if="item.type === 'seckill'" :detail="item.content"></sh-seckill>
					<!-- 拼团 -->
					<sh-groupon v-if="item.type === 'groupon'" :detail="item.content"></sh-groupon>
					<!-- 富文本 -->
					<sh-richtext v-if="item.type === 'rich-text'" :richId="item.content.id"></sh-richtext>
					<!-- 功能列表 -->
					<sh-cell v-if="item.type === 'nav-list'" :list="item.content.list"></sh-cell>
					<!-- 九宫格列表 -->
					<sh-grid v-if="item.type === 'grid-list'" :detail="item.content.list"></sh-grid>
					<!-- 功能标题 -->
					<sh-title-card v-if="item.type === 'title-block'" :title="item.content.name"
						:bgImage="item.content.image" :titleColor="item.content.color"></sh-title-card>
					<!--间隔槽-->
					<view v-if="item.type === 'gap'">
						<u-gap :height="item.content.height" :bg-color="item.content.gapcolor"></u-gap>
					</view>
				    <!--文章分类-->
					<sh-news-tabs
					    v-if="item.type === 'news-tabs'"
						:styleType="item.content.style"
						:title-size="item.content.titlesize"
						:thumb-width="180"
						:thumb-height="200"
						:border-radius="item.content.radius"
						:tabsList="item.content.categorys_arr"
					    :thumb="item.content.style ==='2' || item.content.style === '3' || item.content.style ==='4' || item.content.style === '5'"
					    :show-foot ="item.content.showfoot"
					> 	
					</sh-news-tabs>
					<!--社区论坛-->
                    <sh-topic v-if="item.type === 'topic-card'"></sh-topic>
					<!-- 钱包 -->
					<sh-wallet v-if="item.type === 'wallet-card'"></sh-wallet>
					<!-- 订单卡片 -->
					<sh-order-card v-if="item.type === 'order-card'"></sh-order-card>
					<!-- 直播 -->
					<!-- #ifdef MP-WEIXIN -->
					<sh-live v-if="item.type === 'live' && HAS_LIVE" :detail="item.content"></sh-live>
					<!-- #endif -->
				</block>
			</view>
			<!-- 分类选项卡 -->
			<sh-category-tabs
				v-if="categoryTabsData && categoryTabsData.category_arr && categoryTabsData.category_arr.length"
				:enable="enable" :styleType="categoryTabsData.style" :tabsList="categoryTabsData.category_arr">
			</sh-category-tabs>
			<!-- 登录提示 -->
			<shopro-auth-modal></shopro-auth-modal>
			<!-- 悬浮按钮 -->
			<shopro-float-btn></shopro-float-btn>
			<!-- 连续弹窗提醒 -->
			<shopro-notice-modal v-if="!showPrivacy && isLogin"></shopro-notice-modal>
			<!-- 隐私协议 -->
			<!-- #ifdef APP-PLUS -->
			<privacy-modal v-if="shopInfo && shopInfo.name" v-model="showPrivacy"></privacy-modal>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="tabbar-hack" style="height: 120rpx; width:100%;"></view>
			<!-- #endif -->
		</view>
		<shopro-tabbar></shopro-tabbar>
	</view>
</template>

<script>
	import shSwiper from './components/sh-swiper.vue';
	import shGridSwiper from './components/sh-grid-swiper.vue';
	import shHotGoods from './components/sh-hot-goods.vue';
	import shAdv from './components/sh-adv.vue';
	import shCoupon from './components/sh-coupon.vue';
	import shSeckill from './components/sh-seckill.vue';
	import shGroupon from './components/sh-groupon.vue';
	import shRichtext from './components/sh-richtext.vue';
	import shCell from './components/sh-cell.vue';
	import shGrid from './components/sh-grid.vue';
	import shTitleCard from './components/sh-title-card.vue';
	import shOrderCard from './components/sh-order-card.vue';
	import shWallet from './components/sh-wallet.vue';
	import shSearch from './components/sh-search.vue';
	import shCategoryTabs from './components/sh-category-tabs.vue';
	import shNav from './components/sh-nav.vue';
	import shTopic from './components/sh-topic.vue';
	
	import shNoticebar from './components/sh-noticebar.vue';
    import shNewsTabs from './components/sh-news-tabs.vue';
    import shHotNews from './components/sh-hot-news.vue';
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	import privacyModal from './index/privacy-modal.vue';
	import homeHead from './index/home-head.vue';

	// #ifdef MP-WEIXIN
	import {
		HAS_LIVE
	} from '@/env';
	import shLive from './components/sh-live.vue';
	// #endif

	// #ifdef H5
	let listenMove = document.body; //禁止手机h5下拉刷新带动整个页面。
	let handle = function(e) {
		e.preventDefault();
	};
	// #endif

	export default {
		components: {
		    shSwiper,
			shGridSwiper,
			shGroupon,
			shHotGoods,
			shAdv,
			shCoupon,
			shSeckill,
			shRichtext,
			shCell,
			shGrid,
			shTitleCard,
			shWallet,
			shOrderCard,
			shSearch,
			shCategoryTabs,
			privacyModal,
			homeHead,
			shTopic,
			shNoticebar,
			shNav,
			// #ifdef MP-WEIXIN
			shLive,
			// #endif
			shNewsTabs,
			shHotNews
		},
		data() {
			return {
				// #ifdef MP-WEIXIN
				HAS_LIVE: HAS_LIVE,
				// #endif
				isRefresh: true,
				enable: false, //是否开启吸顶。
				isConnected: true, //是否有网
				showPrivacy: false, //协议
				isScorll: false,
				current: 0,
			};
		},
		computed: {
			...mapState({
				config: ({
					shopro
				}) => shopro.config,
				shopInfo: ({
					shopro
				}) => shopro.config?.shop,
				isLogin: ({
					user
				}) => user.isLogin,
				homeTemplate: ({
					shopro
				}) => shopro.template?.home,
				hasTemplate: ({
					shopro
				}) => shopro.hasTemplate
			}),
			// 项目标题
			appName() {
				if (this.config?.shop) {
					return this.config?.shop?.name;
				}
			},
			// 头部模块数据
			headSwiperList() {
				if (this.homeTemplate?.length) {
					return this.homeTemplate[0]?.content?.list;
				}
			},
			//分类选项卡数据
			categoryTabsData() {
				if (this.homeTemplate?.length) {
					return this.homeTemplate[this.homeTemplate.length - 1]?.content;
				}
			}
		},
		onPullDownRefresh() {
			this.init();
		},
		onPageScroll(e) {
			this.isScorll = e.scrollTop > 100 ? true : false;
		},
		onShow() {
			let that = this;
			this.enable = true;
			this.isLogin && this.getCartList();
			// #ifdef APP-VUE
			// 网络变化检测
			uni.onNetworkStatusChange(res => {
				this.isConnected = res.isConnected;
			});
			uni.getNetworkType({
				success: res => {
					res.networkType == 'none' ? (this.isConnected = false) : (this.isConnected = true);
				}
			});
			// #endif
		},
		onHide() {
			this.enable = false;
		},
		onLoad() {
			// #ifdef APP-VUE
			// app隐私协议弹窗
			if (!plus.runtime.isAgreePrivacy()) {
				this.showPrivacy = true;
				this.showNoticeModal = false;
			}
			// #endif
		
		},
		methods: {
			...mapActions(['appInit', 'getTemplate', 'getCartList']),
			jweixin() {
				this.$wxsdk.openLocation();
			},
			// 初始化
			init() {
				this.isRefresh = false;
				return Promise.all([this.getTemplate()]).then(() => {
					uni.stopPullDownRefresh();
					this.isRefresh = true;
				});
			},
			

		}
	};
</script>

<style lang="scss"></style>
